<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background-color: #303133;
		}
		.box{
			width: 1200px;
			margin: 0 auto;
			background-color: #303133;
		}
		.header{
			padding-bottom: 30px;
			display: flex;
			justify-content: space-between;
			color: white;
			align-items: center;
		}
		a{
			color: white;
			text-decoration: none;
		}
		.music{
			display: flex;
			justify-content: space-around;
		}
		.music-only>img{
			width: 224px;
			height: 224px;
		}
		.music-only>p{
			margin-top: 18px;
		}
		.music-bottom{
			height: 36px;
			margin-top: 20px;
		}
		.music-max{
			padding-bottom: 30px;
			display: flex;
			justify-content: space-between;
			color: white;
			align-items: center;
		}
		.top{
			width: 100%;
			height: 300px;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
		}
		.top-one{
			display: flex;
			width: 370px;
			height: 120px;	
			background-color: black;
			position: relative;
/*			flex-direction:row-reverse ;*/
			justify-content: space-between;
			align-content: center;
		}
		.top-one .icon{
			width: 120px;
			height: 120px;
			position: relative;
			left: 0;
			top: 0;
			z-index: 3;
		}
		.top-one p:nth-of-type(1){
			width: 170px;
			color: white;
			font-size: 18px;
		}
		.top-one p:nth-of-type(2){
			width: 42px;
			height: 20px;
			font-size: 10px;
			color: #909399;
		}
		.top-one .disc{
			width: 110px;
			height: 110px;
			position: absolute;
			top: 0px;
			left: 30px;
			z-index: 2;
		}
		.top-one:hover .disc{
			left: 45px;
			transition: all 0.7s;
		}
		.top-tittle{
/*			display: inline-block;*/
			width: 210px;
			height: 120px;
/*			padding: 0 36px;*/
			display: flex;
			align-items: center;
		}
		.top-tittle div{
			height: 40px;

		}
		.f:hover .e{
			color: red;
		}
		.middle{
			padding-bottom: 30px;
			display: flex;
			justify-content: space-between;
			color: white;
			align-items: center;
		}
		.bottom-one{
			display: flex;
		}
		.bottom-one>div>img{
			width: 175px;
			height: 175px;
			border-radius: 50%;
			padding: 0 15px;
		}
		.bottom-one>div>span{
			
		}


		
	</style>
</head>
<body>
<div class="box">

	<div class="header">
		<h2>热门歌单</h2>
		<a href="">更多</a>
	</div>

	<div class="music">
		<div class="music-only">
			<img src="../300.jpg">
			<p>一起旅行吧 自由不远</p>
		</div>

		<div class="music-only">
			<img src="https://img01.dmhmusic.com/0513/M00/32/74/ChAKCGRGTbWAGLkAABllH8Vg5Po514.jpg@w_300,h_300">
			<p>热门DJ 说唱歌曲</p>
		</div>

		<div class="music-only">
			<img src="https://img01.dmhmusic.com/0206/M00/23/9D/ChR47Fo4stSAPZHSAA983AqXkC8894.jpg@w_300,h_300">
			<p>当我敲代码时听什么</p>
		</div>

		<div class="music-only">
			<img src="https://img01.dmhmusic.com/0206/M00/D7/75/ChAKCGdX2fKADD6hAAIO2qoj11g711.jpg@w_300,h_300">
			<p>路过此间仍是少年</p>
		</div>

		<div class="music-only">
			<img src="https://img01.dmhmusic.com/0513/M00/F6/24/ChAKCGSbpHeAJRL7AAW1A3_Ms-Q085.jpg@w_300,h_300">
			<p>我知道你还爱着我</p>
		</div>
		
	</div>

		<div class="music-bottom">

		</div>


		<div class="music-max">
			<h2>新歌推荐</h2>
			<a href="">更多</a>
		</div>

		<div class="top">
			<div class="top-one">
				
				<img class="icon" src="https://img01.dmhmusic.com/0208/M00/80/39/ChR47Gh1_t-AfFo8AAoOsCQRcEw145.jpg@w_120,h_120">
				<img class="disc" src="../112.png">

				<div class="top-tittle">
					<div class="f">
					<p class="e">歹</p>
					<p>余佩真</p>
					</div>
				</div>	

			</div>

			<div class="top-one">
				
				<img class="icon" src="https://img01.dmhmusic.com/0208/M00/80/39/ChR47Gh1_t-AfFo8AAoOsCQRcEw145.jpg@w_120,h_120">
				<img class="disc" src="../112.png">

				<div class="top-tittle">
					<div class="f">
					<p class="e">歹</p>
					<p>余佩真</p>
					</div>
				</div>	

			</div>

			<div class="top-one">
				
				<img class="icon" src="https://img01.dmhmusic.com/0208/M00/80/39/ChR47Gh1_t-AfFo8AAoOsCQRcEw145.jpg@w_120,h_120">
				<img class="disc" src="../112.png">

				<div class="top-tittle">
					<div class="f">
					<p class="e">歹</p>
					<p>余佩真</p>
					</div>
				</div>	

			</div>

			<div class="top-one">
				
				<img class="icon" src="https://img01.dmhmusic.com/0208/M00/80/39/ChR47Gh1_t-AfFo8AAoOsCQRcEw145.jpg@w_120,h_120">
				<img class="disc" src="../112.png">

				<div class="top-tittle">
					<div class="f">
					<p class="e">歹</p>
					<p>余佩真</p>
					</div>
				</div>	

			</div>

			<div class="top-one">
				
				<img class="icon" src="https://img01.dmhmusic.com/0208/M00/80/39/ChR47Gh1_t-AfFo8AAoOsCQRcEw145.jpg@w_120,h_120">
				<img class="disc" src="../112.png">

				<div class="top-tittle">
					<div class="f">
					<p class="e">歹</p>
					<p>余佩真</p>
					</div>
				</div>	

			</div>

			<div class="top-one">
				
				<img class="icon" src="https://img01.dmhmusic.com/0208/M00/80/39/ChR47Gh1_t-AfFo8AAoOsCQRcEw145.jpg@w_120,h_120">
				<img class="disc" src="../112.png">

				<div class="top-tittle">
					<div class="f">
					<p class="e">歹</p>
					<p>余佩真</p>
					</div>
				</div>	

			</div>

		</div>



				<div class="middle">
					<h2>热门歌手</h2>
					<a href="">更多</a>
				</div>

				<div class="bottom-one">
					<div>
						<img src="https://img01.dmhmusic.com/0210/M00/69/FE/ChR461tNC3uAa3hhAAXZRztOkxU583.jpg@w_200,h_200">
						<span>马玲</span>
					</div>

					<div>
						<img src="https://img01.dmhmusic.com/0206/M00/73/82/ChR461tNDqaAeLoPAAIObRHWwM8565.jpg@w_200,h_200">
						<span>陈焱</span>
					</div>

					<div>
						<img src="https://img01.dmhmusic.com/0210/M00/69/FC/ChR47FtNCy-AC_QAAACYQPr95xA517.jpg@w_200,h_200">
						<span>潘云安</span>
					</div>

					<div>
						<img src="https://img01.dmhmusic.com/0206/M00/72/3C/ChR47FtM--aAIs1yAAE0jTwa-UU047.jpg@w_200,h_200">
						<span>李文杰</span>
					</div>

					<div>
						<img src="https://img01.dmhmusic.com/0210/M00/6A/30/ChR461tNEdSAMhSYAAKYmprPS8c432.jpg@w_200,h_200">
						<span>郑宇界</span>
					</div>

					<div>
						<img src="https://img01.dmhmusic.com/0105/M00/A9/DD/ChR45GHuImyAdwhxAAENTRXnFIs207.jpg@w_200,h_200">
						<span>钱雷</span>
					</div>
				</div>


	
</div>



</body>
</html>